<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">		 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scroll a Relative-Positioned Layer Horizontally</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "css/scroll-rel-h.css";
</style>
<script src="js/dw_scrollObj.js" type="text/javascript"></script>
<script src="js/dw_hoverscroll.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function initScrollLayer() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo = new dw_scrollObj('wn', 'lyr1', 't1');
  
  // pass id's of any wndo's that scroll inside tables
  // i.e., if you have 3 (with id's wn1, wn2, wn3): dw_scrollObj.GeckoTableBugFix('wn1', 'wn2', 'wn3');
  dw_scrollObj.GeckoTableBugFix('wn'); 
}
</script>	
</head>
<body onload="initScrollLayer()">

<h1>Horizontal Mouseover Scrolling</h1>

<table class="main" cellspacing="0" cellpadding="6" border="0">
<tr>
  <td> </td>
	<td>
<!-- scrolling layers -->
<div id="hold">
<div id="wn">
	<div id="lyr1" class="content">
  <table id="t1" border="0" cellpadding="0" cellspacing="6">
	 <tr>
		<td><img src="images/dwc-w-btn.gif" width="175" height="40" alt="" /></td>
		<td><img src="images/dot-com-btn.gif" width="176" height="30" alt="" /></td>
		<td><img src="images/slogan-btn.gif" width="132" height="32" alt="" /></td>
    <td><img src="images/dwc-w-btn.gif" width="175" height="40" alt="" /></td>
		<td><img src="images/dot-com-btn.gif" width="176" height="30" alt="" /></td>
		<td><img src="images/slogan-btn.gif" width="132" height="32" alt="" /></td>
   </tr>
  </table>
  </div>
</div>  <!-- end wn div -->
</div>	<!-- end hold div -->
  </td>
  <td> </td>
</tr>
<tr>
  <td class="spacer"> </td>
	<td class="arrows"><!-- Scroll links -->
    <a href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','left')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/aro-lft.gif" width="19" height="9" alt="" /></a>    
    <a href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','right')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/aro-rt.gif" width="19" height="9" alt="" /></a>
  </td>
  <td class="spacer"> </td>
</tr>
<tr>
  <td> </td> 
  <td class="footer"><a href="http://www.dyn-web.com">www.dyn-web.com</a></td>
  <td> </td>
</tr>
</table>

<p> </p>
<p>See also the <a href="scrollbar-h.html">scrollbar example</a></p>

</body>
</html>
